<template>
  <!--分页-->
  <div class="oolong-pagination">
    <ul class="pagination" style="float:left">
      <li>
        <a href="javascript:void(0)" aria-label="Previous" @click="onFirstClick()">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li>
        <a href="javascript:void(0)" aria-label="Next" @click="onPrevClick()">
          <span aria-hidden="true">‹</span>
        </a>
      </li>
      <li v-for="n in showTotal" :class="page === $index ? 'active' : ''">
        <a href="javascript:void(0)" @click="onPageClick(showFirstNum+n)">{{showFirstNum+n}}</a>
      </li>
      <li class="disabled" v-show="abbreviation"><a>...</a></li>
      <li>
        <a href="javascript:void(0)" aria-label="Next" @click="onNextClick()">
          <span aria-hidden="true">›</span>
        </a>
      </li>
      <li>
        <a href="javascript:void(0)" aria-label="Next" @click="onLastClick()">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
    <div class="oolong-pagination-group">
      <span>共{{page.pageCount}}页，</span>
      <span>到 <input type="text" v-model="page.pageNo" class="form-control oolong-pagination-input"/>页</span>
      <button @click="goPage()" class="btn btn-exit">确定</button>
    </div>
  </div>
</template>

<script>
  import '../resources/css/components/oolong-pagination.scss'
  var param;
  export default{
    components: {},
    props: {
      page: {

      },
      showTotal:{
        type:Number,
        default:5
      },
      abbreviation:{
        type:Boolean,
        default:true
      }
    },
    data(){
      return {

      }
    },
    methods: {
      //去哪一页
      goPage() {
        if(parseInt(this.page.pageNo)<=parseInt(this.page.pageCount)&&parseInt(this.page.pageNo)>=1){
          //dis
        }else{
          this.page.pageNo="1";
        }
        //dis
        this.$dispatch('change-pageNo');
      },
      //首页请求事件
      onFirstClick(){
        this.page.pageNo = 1;
        //dis
        this.$dispatch('change-pageNo');
      },
      //下一页点击事件
      onNextClick(){
        if(parseInt(this.page.pageNo)+1<=parseInt(this.page.pageCount)){
          this.page.pageNo=parseInt(this.page.pageNo)+1+"";
        }else{
          return false;
//          this.page.pageNo="1";
        }
        //dis
        this.$dispatch('change-pageNo');
      },
      //当前页点击事件
      onPageClick(pageNo){
//        alert("pageNo:"+pageNo);
        if(pageNo<=parseInt(this.page.pageCount)&&pageNo>=1){
          this.page.pageNo=pageNo+"";
        }else{
          this.page.pageNo="1";
        }
        this.$dispatch('change-pageNo');
      },
      //上一页点击事件
      onPrevClick(){
        if(parseInt(this.page.pageNo)-1>=1){
          this.page.pageNo=parseInt(this.page.pageNo)-1+"";
        }else{
          return false;
//          this.page.pageNo=parseInt(this.page.pageCount)+"";
        }
        //dis
        this.$dispatch('change-pageNo');
      },
      //最后一页点击事件
      onLastClick(){
          this.page.pageNo=parseInt(this.page.pageCount)+"";
        //dis
        this.$dispatch('change-pageNo');
      }
    },
    computed:{
      showFirstNum:function () {
        if(parseInt(this.page.pageNo)>parseInt(this.page.pageCount)-parseInt(this.showTotal)){
          return parseInt(this.page.pageCount)-parseInt(this.showTotal)+1;
        }else {
          return parseInt(this.page.pageNo);
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
